import { ref , onMounted } from "vue";
import type { TableColumnsType } from "ant-design-vue";
import type { Query } from "@/interface/Query"
import type { User } from "@/interface/User";
import { workerApi , workerOperateApi , removeWorkerApi } from "@/controller/UserApi"
import { message } from "ant-design-vue";
import dayjs from "dayjs";
import type { Post } from "@/interface/Post";
import { listAllApi } from "@/controller/PostApi"
import { useLoginStore } from "@/stores/loginStore"

export default function() {

    const loginStore = useLoginStore();

    function selectDept(e : any) {
        if(e[0]) {
            query.value.deptId = e[0];
            list();
        }
    }


    onMounted(()=> {
       list();
    });

    let post = ref<Post[]>([]);
    function postList() {
        listAllApi().then(res => {
           post.value = res.data;
        });
    }

    let columns = ref<TableColumnsType>([
        {
            title: '姓名',
            dataIndex: 'realName',
            fixed: 'left',
            width: 60,
            align: 'center',
            resizable: true
        },
        {
            title: '联系电话',
            dataIndex: 'phoneNumber',
            width: 110,
            align: 'center',
            resizable: true
        },
        {
            title: '部门',
            dataIndex: 'deptName',
            width: 110,
            align: 'center',
            resizable: true
        },
        {
            title: '岗位',
            dataIndex: 'postName',
            width: 110,
            align: 'center',
            resizable: true
        },
        {
            title: '工号',
            dataIndex: 'account',
            width: 80,
            align: 'center',
            resizable: true
        },
        {
            title: '账号状态',
            dataIndex: 'isActive',
            width: 100,
            align: 'center',
            resizable: true
        },
        {
            title: '入职时间',
            dataIndex: 'joinDate',
            width: 80,
            align: 'center',
            resizable: true
        },
        {
            title: '合同到期时间',
            dataIndex: 'contractExpiryDate',
            width: 100,
            align: 'center',
            resizable: true
        },
        {
            title: '操作',
            dataIndex: 'action',
            fixed: 'right',
            align: 'center',
            width: 120,
            resizable: true
        },
    ])

    function handleResizeColumn(w : any, col : any) {
        col.width = w;
    }

    let operatorStore = ref({
       open: false,
       cmd : 0,
    });

    let worker = ref({} as User);


    function operator(cmd : number, data ? : User) {
        postList();
        operatorStore.value.open = true;
        operatorStore.value.cmd = cmd;
        if(cmd == 1 && data) {
            worker.value = data;
            if (data.joinDate) {
                worker.value.joinDate = dayjs(data.joinDate,"YYYY-MM-DD") as any;
            }
            if (data.contractExpiryDate) {
                worker.value.contractExpiryDate = dayjs(data.contractExpiryDate,"YYYY-MM-DD") as any;
            }
        }else {
            worker.value.pId = loginStore.loginInfo.user.user.id;
            worker.value.propertyId = loginStore.loginInfo.user.user.propertyId;
        }

    }

    let rules = {
        realName: [
            { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        idCard: [
            { required: true, message: '请输入身份证号码', trigger: 'blur' }
        ],
        phoneNumber: [
            { required: true, message: '请输入联系电话', trigger: 'blur' }
        ],
        departmentId: [
            { required: true, message: '请选择部门', trigger: 'blur' }
        ],
        positionId: [
            { required: true, message: '请选择岗位', trigger: 'blur' }
        ],
        account: [
            { required: true, message: '请输入工号', trigger: 'blur' }
        ],
        isActive: [
            { required: true, message: '请选择账号状态', trigger: 'blur' }
        ],
        joinDate: [
            { required: true, message: '请选择入职时间', trigger: 'blur' }
        ],
        contractExpiryDate: [
            { required: true, message: '请选择合同到期时间', trigger: 'blur' }
        ],
        contractPeriod: [
            { required: true, message: '请输入合同描述', trigger: 'blur' }
        ]

    }


    let tableData = ref<User[]>([]);

    let total = ref(0);

    let query = ref({
        page: 1,
        size : 15,
        keyWord: ''
    } as Query);

    function list() {
        workerApi(query.value).then( res => {
            if (res.code == 200) {
                tableData.value = res.data.records;
                total.value = parseInt(res.data.totalRow);
            }
        })
    }

    let searchBox = ref(true);
    function resetQuery() {
        query.value = {
            page: 1,
            size : 15
        } as Query;
        list();
    }

    function pageChange(page : number, size : number) {
        query.value.page = page;
        query.value.size = size;
        list();
    }

    let formRef = ref();
    function submit() {
        formRef.value.validate().then( ( res : any ) => {
            worker.value.passwordHash = null;
            workerOperateApi(worker.value).then( res => {
                if(res.code == 200) {
                    message.success( operatorStore.value.cmd == 0 ? '新增成功' : '编辑成功');
                    list();
                    cancel();
                }else {
                    message.error(res.msg);
                }
            })
        })
    }

    function cancel() {
        operatorStore.value.open = false;
        worker.value = {} as User;
    }


    let workerInfoOpen = ref(false);

    let workerInfo = ref({} as User);
    function workerInfoEvent(data : User) {
        workerInfoOpen.value = true;
        workerInfo.value = data;
    }

    const filterPost = (input: string, option: any) => {
        return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };

    function remove(ids : string[]) {
        removeWorkerApi(ids).then( res => {
            if(res.code == 200) {
                message.success('删除成功');
                list();
            }else {
                message.error(res.msg);
            }
        });
    }

    return {
        selectDept , columns , handleResizeColumn , resetQuery ,
        query , tableData , pageChange , list , total , searchBox ,
        operatorStore , worker , operator , submit , cancel , workerInfoOpen ,
        workerInfo , workerInfoEvent , postList , post , filterPost , remove , rules , formRef
    }

}
